<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 		<link rel="stylesheet" href="http://design.rtve.int/beatrizjc/trato/style.css" type="text/css" media="screen" /> -->
		<link href="/trato/resources/css/style.css" rel="stylesheet"/>
		<script src="/trato/resources/js/jquery-1.11.0.min.js"></script>
		<script src="/trato/resources/js/cliente/editList.js"></script>
		
	</head>
	<body>
	
		<c:import url="header.jsp" />
		
		<h3><fmt:message key="cliente.editList"/></h3>
		
		
		<div class="card panel_user" id="botones">
			<div class="headerCol">
				<label><fmt:message key="cliente.editList.name"/></label>
				<input type="hidden" id="idLista" name="idLista" value="${lista.id}" />
				<input id="tituloLista" type="text" name="nombreLista" value="${lista.nombre}"/>
			</div>
		</div>
		
		
		<div class="tabs">
			<div id="tab-producto" class="tab active" onclick="ponerLayerProductos();">
				<label for="tab-1"><fmt:message key="cliente.editList.item"/></label>
			</div>
			<div id="tab-amigos" class="tab" onclick="ponerLayerAmigos();">
				<label for="tab-2"><fmt:message key="cliente.editList.friends"/></label>
			</div>
		</div>
		
		<div id="contenedor-producto" class="container">
			<table>
				<tr class="headerCol">
					<td colspan="4"><fmt:message key="cliente.editList.items"/> 
						<input type="button" class="add" title="<fmt:message key="cliente.lista.addProducto"/>" onclick="mostrarFormAddProducto();" />
					</td>
				</tr>
				<tr class="headerCol fields">
					<td><fmt:message key="cliente.lista.producto.nombre"/></td>
					<td><fmt:message key="cliente.lista.producto.cantidad"/></td>
					<td><fmt:message key="cliente.lista.producto.precio"/></td>
					<c:if test="${lista.administrador.getUsername()==username}">
						<td><fmt:message key="cliente.panel.action"/></td>
					</c:if>
				</tr>
				<c:forEach var="producto" items="${lista.productos}">
					<tr id="${producto.id}">
						<td class="plain-text">
							<span id="producto"><c:out value="${producto.nombre}" /></span>
							<c:if test="${lista.administrador.getUsername()==username}">
								<input id="productoInput" type="text" name="producto${producto.id}" value="${producto.nombre}" style="display:none;" />
							</c:if>
						</td>
						
						<td class="plain-text">
							<span id="cantidad"><c:out value="${producto.cantidad}" /></span>
							<c:if test="${lista.administrador.getUsername()==username}">
								<input id="cantidadInput" type="text" name="cantidad${producto.id}" value="${producto.cantidad}" style="display:none;" />
							</c:if>
						</td>
						
						<td class="plain-text">
							<span id="precio"><c:out value="${producto.precio}" /></span>
							<c:if test="${lista.administrador.getUsername()==username}">
								<input id="precioInput" type="text" name="precio${producto.id}" value="${producto.precio}" style="display:none;" />
							</c:if>
						</td>
						
						<c:if test="${lista.administrador.getUsername()==username}">
							<td>
								<div id="botones">
									<input type="button" class="edit" title="<fmt:message key="cliente.lista.editProducto"/>" onclick="editarProducto(${producto.id});"></input>
									<input type="button" class="delete" title="<fmt:message key="cliente.lista.removeProducto"/>" onclick="eliminarProducto(${lista.id},${producto.id});"></input>
								</div>
								<div id="finalizarEdicion" style="display:none;">
									<input type="button" title="<fmt:message key="cliente.lista.saveProducto"/>" value="Guardar" onclick="actualizarProducto(${lista.id},${producto.id});"></input>
								</div>
							</td>
						</c:if>
					</tr>
				</c:forEach>
			</table>
		</div>
		
		
		<div id="contenedor-amigos" class="container" style="display:none;">
			<table>
				<c:if test="${lista.administrador.getUsername()==username}">
					<tr class="headerCol">
						<td><fmt:message key="cliente.lista.chooseNewProducto"/></td>
						<td colspan="3">
							<form action="${lista.id}/addAmigo" method="get">
								<select id="clienteCombo" name="clienteCombo"> 
									<c:forEach items='${clientes}' var='cliente'>  
									   <option value="<c:out value='${cliente.id}'/>">
											<c:out value='${cliente.nombre}'/>
											<c:out value='${cliente.apellido1}'/>
											<c:out value='${cliente.apellido2}'/>
											(<c:out value='${cliente.getUsername()}'/>)
										</option>  
									</c:forEach>  
								</select> 
								<input type="submit" class="add" title="<fmt:message key="cliente.lista.addFriend"/>"/>
							</form>
						</td>
					</tr>
				</c:if>
				<tr class="headerCol">
					<td colspan="4"><fmt:message key="cliente.lista.friends"/></td>
				</tr>
				<tr class="headerCol fields">
					<td><fmt:message key="cliente.lista.friends.email"/></td>
					<td colspan="2"><fmt:message key="cliente.lista.friends.name"/></td>
					<c:if test="${lista.administrador.getUsername()==username}">
						<td><fmt:message key="cliente.lista.friends.action"/></td>
					</c:if>
				</tr>
				<c:forEach var="amigo" items="${listaAmigos}">
					<tr id="tr${amigo.id}">
						<td class="plain-text">
							<span id="email"><c:out value="${amigo.username}"/></span>
						</td>
						
						<td class="plain-text" colspan="2">
							<span id="nombreAmigo${amigo.id}">${amigo.nombre} ${amigo.apellido1} ${amigo.apellido2}</span>
						</td>
						
						<c:if test="${lista.administrador.getUsername()==username}">
							<td>
								<div id="eliminarAmigo">
									<input type="button" class="delete" title="<fmt:message key="cliente.lista.friends.remove"/>" onclick="eliminarAmigo(${lista.id},${amigo.id});"></input>
								</div>
							</td>
						</c:if>
					</tr>
				</c:forEach>
			</table>
		</div>
		
		<div id="popup" class="popup" style="display:none;">
			<form action="${lista.id}/addProducto" method="post">
				<span class="cerrar" onclick="cerrarVentanaAdd();" style="float:right;"></span>
				<div class="row">
					<div class="label"><fmt:message key="cliente.lista.producto.nombre"/>:</div>
					<div class="field"><input type="text" id="nombre" name="nombre" value="" /></div>
				</div>
				<div class="row">
					<div class="label"><fmt:message key="cliente.lista.producto.cantidad"/>:</div>
					<div class="field"><input type="text" id="cantidad" name="cantidad" value="" onkeypress="return IsNumber(event);" /></div>
				</div>
				<div class="row">
					<div class="label"><fmt:message key="cliente.lista.producto.precio"/>:</div>
					<div class="field"><input type="text" id="precio" name="precio" value="" /></div>
				</div>
				<div class="row">
					<div class="button"><input type="submit" value="<fmt:message key="cliente.lista.addProducto"/>" /></div>
				</div>
			</form>
		</div>
		
	
		<div class="card">
			<span class="action"><a href='../home'><fmt:message key="return"/></a></span>
		</div>
	</body>
</html>


